<template>
  <div class="pad-out-box">
    <el-form label-width="150px" size="small" :model="searchParams" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="事项类型">
            <el-select v-model="searchParams.matterType" clearable>
              <el-option v-for="item in matterTypeList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始日期">
            <el-date-picker v-model="searchParams.leAcceptanceTime" type="date" value-format="timestamp" :picker-options="pickerOptionsStart" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="截止日期">
            <el-date-picker v-model="searchParams.geAcceptanceTime" type="date" value-format="timestamp" :picker-options="pickerOptions" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="验收人">
            <el-input placeholder="请输入" v-model="searchParams.acceptancePerson" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否付款">
            <el-select v-model="searchParams.isPad" clearable>
              <el-option v-for="item in payList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="验收结果">
            <el-select v-model="searchParams.acceptanceResult" clearable>
              <el-option v-for="item in resultList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-button type="primary" size="mini" class="f-right">导出</el-button>
          <el-button type="primary" size="mini" class="f-right margin-right-10" @click="doAcceptance">工程验收</el-button>
          <el-button type="primary" size="mini" class="f-right" @click="getTableData('')">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="padding-left-right-10">
      <el-table :border="true" :data="tableData">
        <el-table-column align="center" label="事项类型" prop="matterTypeName">
          <template slot-scope="scope">
            <span v-if="scope.row.matterType == 2">运营支出</span>
            <span v-else>非运营支出</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="事项名称" prop="matterNameValue"></el-table-column>
        <el-table-column align="center" label="验收人" prop="acceptancePerson" />
        <el-table-column align="center" label="验收结果" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.acceptanceResult == 1">合格</span>
            <span v-else>不合格</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="验收时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.acceptanceTime | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="关联合同付款" prop="contractName" />
        <el-table-column align="center" label="操作" prop="remark">
          <template slot-scope="scope">
            <el-button type="text" @click="getInfo(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination @change="pageChange" :total="total" />
    </div>

    <el-dialog title="工程验收" :visible.sync="dialogShow" width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
      <form-common :filed-list="acceptanceFiledList" ref="acceptanceForm" @selectChange="getMatter"></form-common>
      <div class="font-size-16 padding-left-10 padding-bottom-10 color-333333">图片说明</div>
      <UploadPhotoList class="padding-left-10" ref="photoAlbum" :multiple="true" :file-list="photoList" :readonly="isInfo" @successChange="setPhotoList" @deleteChange="setPhotoList"></UploadPhotoList>
      <span slot="footer" class="dialog-footer" v-if="!isInfo">
        <el-button size="small" @click="dialogShow = false">取消</el-button>
        <el-button size="small" type="primary" @click="confirmDialog">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import formCommon from '@g/components/form/formCommon.vue';
  import { apiCheckBillList, apiCheckBillAdd, apiCheckBillDelete, apiCheckBillInfo, apiProject, apiMatterType, apiMatter } from '../../api/acceptance';
  import { acceptanceFiledList } from './form.js';
  import { requestTips } from '../../assets/util';

  export default {
    data() {
      return {
        dialogShow: false,
        projectList: [],
        matterTypeList: [
          {
            primaryKey:2,
            name:"运营支出"
          },{
            primaryKey:4,
            name:"非运营支出"
          }
        ],
        matterList: [],
        tableData: [],
        isInfo:false,
        total: 0,
        pageSize: 10,
        currentPage: 1,
        photoList: [], //相册
        attachmentList: [], //相册
        resultList: [
          { primaryKey: 0, name: '不合格' },
          { primaryKey: 1, name: '合格' },
        ],
        payList: [
          { primaryKey: 0, name: '否' },
          { primaryKey: 1, name: '是' },
        ],
        acceptanceFiledList: acceptanceFiledList,
        searchParams: {
          matterType:"",
          acceptancePerson:"",
          isPad:"",
          acceptanceResult:"",
          leAcceptanceTime:"",
          geAcceptanceTime:""
        },
        pickerOptions: {
          disabledDate: time => {
            if (this.searchParams.leAcceptanceTime) {
              return time.getTime() < this.searchParams.leAcceptanceTime;
            }
          },
        },
        pickerOptionsStart: {
          disabledDate: time => {
            if (this.searchParams.geAcceptanceTime) {
              return time.getTime() > this.searchParams.geAcceptanceTime;
            }
          },
        },
      };
    },

    mounted() {
      this.getDictroy();
      this.getTableData();
    },

    methods: {
      //赋值图片
      setPhotoList(data) {
        this.attachmentList = [];
        data.dataList.forEach(item => {
          this.attachmentList.push({
            fileId: item.key,
            fileUrl: item.url,
            fileTitle: item.originalName,
            fileDesc: item.originalName,
          });
        });
      },

      //字典
      async getDictroy() {
        let [projectList] = await Promise.all([this.getProject()]);
        this.projectList = projectList;
        this.acceptanceFiledList.forEach(item => {
          if (item.bindFieldName == 'projectKey') {
            item.optionList = projectList;
          }
        });
      },

      //数据源
      async getTableData(type) {
        let res = await apiCheckBillList({
          pageSize: this.pageSize,
          currentPage: type ? this.currentPage : 1,
          matterType:this.searchParams.matterType || null,
          acceptancePerson:this.searchParams.acceptancePerson || null,
          isPad:this.searchParams.isPad == 1 ? this.searchParams.isPad : 0,
          acceptanceResult:this.searchParams.acceptanceResult || null,
          leAcceptanceTime:this.searchParams.leAcceptanceTime || null,
          geAcceptanceTime:this.searchParams.geAcceptanceTime || null
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //详情
      async getInfo(row) {
        this.isInfo = true
        this.photoList = []
        let data = await apiCheckBillInfo({primaryKey:row.primaryKey})
        data.attachmentList = data.attachmentList || []
        data.attachmentList.forEach(item=>{
          this.photoList.push({
            url: item.fileUrl,
            name: item.fileTitle,
            progress: 100
          });
        })
        data.acceptanceResult = Number(data.acceptanceResult)
        this.dialogShow = true;
        this.$nextTick(() => {
          this.$refs.acceptanceForm.initModel();
          this.acceptanceFiledList.forEach(item => {
            for (var i in data) {
              if (item.bindFieldName == i) {
                item.bindFieldVal = data[i];
              }
            }
          });
        });
      },

      //验收弹框显示
      doAcceptance() {
        this.isInfo = false
        this.dialogShow = true;
        this.$nextTick(() => {
          this.$refs.acceptanceForm.clearValidateForm();
        });
      },

      //确认验收
      async confirmDialog() {
        let model = this.$refs.acceptanceForm.validateForm();
        if (!model) return;
        model.attachmentList = this.attachmentList;
        let res = await apiCheckBillAdd(model);
        requestTips(res, () => {
          this.dialogShow = false;
          this.getTableData();
        });
      },

      //项目名称
      async getProject() {
        return new Promise(async (resolve, reject) => {
          let res = await apiProject();
          resolve(res.rows || []);
        });
      },

      //事项类型
      async getMatterType() {
        return new Promise(async (resolve, reject) => {
          let res = await apiMatterType();
          resolve(res.matterTypeList || []);
        });
      },

      //事项名称
      async getMatter(data) {
        if (data.filedName == 'matterType') {
          let res = await apiMatter({ chargeItemBizType: data.filedVal });
          this.acceptanceFiledList.forEach(item => {
            if (item.bindFieldName == 'matterName') {
              item.optionList = res.rows || [];
            }
          });
        }
      },

      //分页
      pageChange(e) {
        this.currentPage = e.currentPage;
        this.pageSize = e.pageSize;
        this.getTableData('more');
      },
    },

    components: { formCommon },
  };
</script>
<style scoped type="scss">
  ::v-deep .el-dialog__body {
    overflow: hidden;
  }
  .activity-chose {
    color: #fff;
    background: #409eff;
    border: 1px solid #409eff;
  }
</style>
